<template>
  <div class="modal-wrap">
    <a-form-model
      :layout="typePage === 0 ? 'inline' : 'horizontal'"
      ref="ruleForm"
      :model="formData"
      :label-col="labelCol"
      :class="typePage === 0 ? 'content' : 'content-null'"
    >
      <a-form-model-item
        v-for="(item, index) in newFormKey"
        :key="index"
        :label="item.title"
        :prop="item.key"
      >
        <template v-if="item.view === 'sel_search'">
          {{ getOptionsName(formData[item.key]) }}
        </template>
        <template v-else-if="item.view === 'radio'">
          {{ formData[item.key] === 1 ? "正常" : "冻结" }}
        </template>
        <template v-else-if="item.view === 'sel_select'">
          {{ getCommentStatus(formData[item.key]) }}
        </template>
        <template v-else-if="item.view === 'cat_tree'">
          {{ getCheckedName(formData[item.key]) }}
        </template>
        <template v-else-if="item.view === 'cat_tree_auth'">
          {{ getCheckedName(formData[item.key]) }}
        </template>
        <template v-else>{{ formData[item.key] }}</template>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>
<script setup>
import { computed } from "vue";
const labelCol = {
  style: {
    width: "120px",
    whiteSpace: "nowrap",
  },
};
const props = defineProps({
  formKey: {
    type: Array,
  },
  option: {
    type: Array,
  },
  formData: {
    type: Object,
  },
  typePage: {
    type: Number,
    default: 0,
  },
});
function getOptionsName(value) {
  if (props.typePage === 1) {
    return props.option.find((item) => item.id === value)?.roleCode || "";
  } else if (props.typePage === 2) {
    return props.option.find((item) => item.roleCode === value)?.roleName || "";
  } else {
    return props.option.find((item) => item.value === value)?.name || "";
  }
}
function getCheckedName(arr) {
  return arr.map((item) => item.label)?.join(", ");
}
const getCommentStatus = (text) => {
  let status = "";
  let comment = text || "";
  if (comment === "" || comment === "-1") {
    status = "未评审";
  } else if (comment === "0") {
    status = "不通过";
  } else if (comment === "1") {
    status = "通过";
  }
  return status;
};
const commentFormKey = [
  {
    title: "评审状态",
    view: "sel_select",
    key: "comment_status",
  },
  {
    title: "评审时间",
    view: "input",
    key: "comment_time",
  },
  {
    title: "评审意见",
    view: "textarea",
    key: "comment_text",
  },
];
const newFormKey = computed(() => {
  let arr = [];
  if (props.typePage !== 1) {
    arr = props.formKey.filter(
      (item) =>
        item.key !== "comment_status" &&
        item.key !== "comment_text" &&
        item.key !== "comment_time"
    );
  } else {
    arr = props.formKey.filter((item) => item.view !== "passWord");
  }
  return arr.concat(commentFormKey);
});
</script>
<style scoped lang="less">
.modal-wrap {
  width: 100%;
  color: #333;
  max-height: 500px;
  overflow: hidden;
  overflow-y: auto;
  padding: 0 10px;
  &::-webkit-scrollbar {
    width: 0.416667vw;
    height: 0.416667vw;
    background-color: #f8f8f8;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 0.333vw;
    box-shadow: inset 0 0 0.3125vw rgba(175, 175, 175, 0.3);
    background-color: #ebebeb;
  }
  .content {
    display: grid;
    grid-template-columns: repeat(2, 50%);
    grid-gap: 0px 20px;
    grid-auto-flow: row;
  }
  .content-null {
  }
}
/deep/ .ant-row.ant-form-item.ant-form-item-with-help {
  margin-bottom: 0;
}

/deep/ .ant-row.ant-form-item {
  margin-bottom: 5px;
  display: flex;
}
/deep/ .ant-col.ant-form-item-control-wrapper {
  flex: 1;
  word-break: break-all;
}
</style>
